<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    body {background:black;}
    #c1 {background:white;}
    </style>
    <script>
    window.onload=function (){
      let oV=document.getElementById('v1');
      let oC=document.getElementById('c1');
      let gd=oC.getContext('2d');

      let W=oC.width,H=oC.height;

      requestAnimationFrame(next);

      function next(){
        gd.drawImage(oV, 0, 0);

        //
        let imageData=gd.getImageData(0, 0, W, H);
        let data=imageData.data;

        for(let r=0;r<H;r++){
          for(let c=0;c<W;c++){
            data[(r*W+c)*4+0]=data[(r*W+c)*4+1]=data[(r*W+c)*4+2]=
            (data[(r*W+c)*4+0]+data[(r*W+c)*4+1]+data[(r*W+c)*4+2])/3;
          }
        }

        gd.putImageData(imageData, 0, 0);

        requestAnimationFrame(next);
      }
    };
    </script>
  </head>
  <body>
    <video src="movie.ogg" id="v1" autoplay loop style="display:none;"></video>
    <canvas id="c1" width="320" height="240"></canvas>
  </body>
</html>
